<template>
  <div class="home">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="i in imgs" :key="i">
        <el-image style="width: 1500px; height: 300px" :src="i"></el-image>
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :span="24"
        ><div class="grid-content bg-purple" @click="on">
          <p class="col-p">Recommend&贫困户推荐</p>
        </div></el-col
      >
      <el-col :span="24"
        ><div
          class="grid-content bg-purple"
          v-for="item in PoorList"
          :key="item.id"
        >
          <div class="imgLeft">
            <img class="img-bg" :src="item.cover" />
            <div>
              <p class="img-p-big">{{ item.audit }}</p>
              <p class="img-p">家乡:云南省</p>
              <p class="img-p">
                月收入:2000,家中有2个弟弟,生活举步维艰,小女孩以一人之力供给一个家庭,年迈的奶奶也不能够好好的照顾这个家庭,希望有条件的人能够给予帮助,同时国家也会大力扶持
              </p>
            </div>
          </div>
          <div class="fontRight">
            <img :src="item.cover" />
            <div>
              <p class="img-p-big">{{ item.audit }}</p>
              <p class="img-p">家乡:江西省</p>
              <p class="img-p">
                月收入:1020,家中有1个弟弟,生活举步维艰,小女孩以一人之力供给一个家庭,年迈的奶奶也不能够好好的照顾这个家庭,希望有条件的人能够给予帮助,同时国家也会大力扶持
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24"
        ><div class="grid-content bg-purple">
          <p class="col-p">Recommend贫困户推荐</p>
        </div></el-col
      >
      <el-col :span="24"
        ><div
          class="grid-content bg-purple"
          v-for="item in PoorList"
          :key="item.id"
        >
          <div class="imgLeft">
            <img class="img-bg" :src="item.cover" />
            <div>
              <p class="img-p-big">{{ item.audit }}</p>
              <p class="img-p">家乡:云南省</p>
              <p class="img-p">
                月收入:2000,家中有2个弟弟,生活举步维艰,小女孩以一人之力供给一个家庭,年迈的奶奶也不能够好好的照顾这个家庭,希望有条件的人能够给予帮助,同时国家也会大力扶持
              </p>
            </div>
          </div>
          <div class="fontRight">
            <img :src="item.cover" />
            <div>
              <p class="img-p-big">{{ item.audit }}</p>
              <p class="img-p">家乡:江西省</p>
              <p class="img-p">
                月收入:1020,家中有1个弟弟,生活举步维艰,小女孩以一人之力供给一个家庭,年迈的奶奶也不能够好好的照顾这个家庭,希望有条件的人能够给予帮助,同时国家也会大力扶持
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <img
            class="img-ft"
            src="http://hbfp.hebei.com.cn/images/jzfp_pic_21.jpg"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      pageSize: 3,
      pageNum: 1,
      imgs: [],
      PoorList: {},
    };
  },
  methods: {
    async getList() {
      let { data: res } = await this.$axios.get("/carousel/getlist");
      // console.log(res.data.list);
      for (const i in res.data.list) {
        if (res.data.list[i].available === true) {
          this.imgs.push(res.data.list[i].picture);
        }
      }
    },
    async getPoorList() {
      let { data: res } = await this.$axios.get("/poor/getlist", {
        params: {
          pageSize: 1,
          pageNum: 1,
        },
      });
      this.PoorList = res.data.list;
    },
    on() {
      this.$router.push("/user");
    },
  },
  created() {
    this.getList();
    this.getPoorList();
  },
};
</script>

<style lang="scss" scoped>
.home {
  background-color: #fff;
}
.el-row {
  padding: 5px 10px 0px 10px;
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  color: rgb(0, 0, 0);
}
.grid-content {
  border-radius: 4px;
  height: 40px !important;
}
.bg-purple {
  background: #ffffff;
  opacity: 0.9;
  .col-p {
    color: rgb(142, 187, 255);
    font-size: 28px;
    font-weight: 700;
    background-color: rgb(0, 75, 145);
    width: 1480px;
    margin: 0 auto;
  }
}

img {
  width: 150px;
  height: 130px;
  margin: 5px 20px;

}
.imgLeft {
  width: 50%;
  // height: 140px;
  display: flex;
}
.fontRight {
  width: 50%;
  float: right;
  display: flex;
  margin-top: -140px;
}
.img-p-big {
  font-family: Microsoft YaHei;
  font-size: 24px;
  font-weight: 500;
  color: rgb(0, 54, 85);
  background-color: rgb(212, 212, 212);
}
.img-p {
  font-size: 16px;
  font-weight: 700px;
  font-family: Helvetica;
}
.img-ft {
  width: 99%;
  height: 95%;
  margin: 3px 6px;
}
li {
  list-style-type: none;
}
</style>